<template>
	<view class="content">
		<view class="type">
			<view class="left">请假类型</view>
			<view class="uni-list-cell-db">
			    <picker @change="bindPickerChange" :value="index" :range="array">
			        <view class="uni-input">{{array[index]}}</view>
			    </picker>
			</view>
			<uni-icon type="arrow" size="20" color="#b6b6b6"></uni-icon>
		</view>
		<view class="startTime">
			<view class="left">开始时间</view>
			<view class="uni-list-cell-db">
			    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			        <view class="uni-input">{{date}}</view>
			    </picker>
			</view>
			<uni-icon type="arrow" size="20" color="#b6b6b6"></uni-icon>
		</view>
		<view class="endTime">
			<view class="left">结束时间</view>
			<view class="uni-list-cell-db">
			    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange2">
			        <view class="uni-input">{{date2}}</view>
			    </picker>
			</view>
			<uni-icon type="arrow" size="20" color="#b6b6b6"></uni-icon>
		</view>
		<form @submit="submitBtn">
			<view class="textareaBox">
				<textarea value="" placeholder="请输入请假事由 (必填)" @input="bindTextArea" name="reason" />
				<text>{{cursor}}/140</text>
			</view>
			<button class="submit" form-type="submit">提 交 申 请</button>
		</form>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	import {dns} from "@/pages/dns.js";
	export default {
		data(){
			const currentDate = this.getDate({
				format: true
			})
			return {
				array: ['事假', '病假', '产假', '其他'],
				index: 0,
				date: currentDate,
				date2: currentDate,
				cursor: 0
			}
		},
		watch:{
			date(newVal,oldVal){
				console.log(newVal,oldVal)
			},
			date2(newVal,oldVal){
				console.log(newVal,oldVal)
			}
		},
		components: {
			uniIcon
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods:{
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			bindDateChange: function(e) {
				this.date = e.target.value;
			},
			bindDateChange2: function(e) {
				this.date2 = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindTextArea(e){//输入框输入事件
				this.cursor = e.detail.cursor;
			},
			submitBtn(e){//提交
				let reason = e.detail.value.reason;
				if(!reason){
					uni.showToast({
						icon: 'none',
						title: '请输入请假事由'
					})
					return;
				}
				uni.request({
					method: 'POST',
					data: {
						type: this.index+1,
						start_time: this.date,
						end_time: this.date2,
						reason: reason
					},
					header:{
						token: uni.getStorageSync("token")
					},
					url: dns + 'apply/add',
					success: (res)=>{
						console.log(res)
						if(res.data.status == 1){
							uni.showToast({
								title: res.data.msg
							});
							setTimeout((res)=>{
								uni.navigateBack({
									delta: 1
								})
							},1000)
						}
						if(res.data.status == 0){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
						if(res.data.status == -1){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: #f6f6f6;
	}
	.content{
		height: 100%;
		background-color: #f6f6f6;
		padding-top: 50upx;
		font-size: 34upx;
		.type,.startTime,.endTime{
			position: relative;
			line-height: 100upx;
			background-color: #fff;
			padding: 0 40upx;
			margin-bottom: 50upx;
			display: flex;
			.left{
				width: 180upx;
			}
			.uni-list-cell-db{
				flex: 1;
			}
			uni-icon{
				position: absolute;
				top: 4px;
				right: 40upx;
			}
		}
		.startTime,.endTime{
			margin-bottom: 0;
			border-bottom: 1upx solid #eee;
		}
		.textareaBox{
			position: relative;
			background-color: #fff;
			padding: 0 30upx;
			textarea{
				width: 100%;
				height: 200upx;
				padding-top:10px;
				color: #878787;
				font-size:12px;
			}
			text{
				position: absolute;
				bottom: 20upx;
				right: 30upx;
				font-size: 24upx;
				color: #878787;
			}
		}
		.submit{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			line-height: 100upx;
			font-size: 34upx;
			background-color: #f45f61;
			border-radius: 0;
			color: #fff;
		}
	}
</style>
